<template>
    <view class="page-box">
        <header class="header" v-if="list.length > 0">
            <view class="top row bothSide verCenter">
                <text class="t1">团队成员服务费比例管理</text>
            </view>
        </header>
        <view class="list column" v-if="list.length > 0">
            <view class="box" v-for="(item,index) in list" :key="index">
                <view class="top row bothSide verCenter">
                    <view class="left row verCenter">
                        <text class="iconfont icon-a-tubiaochangyongsousuo41"></text>
                        <text class="tt">{{item.product_name}}</text>
                    </view>
                    <view class="right row verCenter" v-if="item.ration != 0">
                        <text class="t1">服务费比例：</text>
                        <text class="t2">{{item.ration}}</text>
                    </view>
                </view>
                <view class="wrap row bothSide">
                    <view class="text-item row verCenter">
                        <text class="label">产品成本：</text>
                        <text class="t2">{{item.product_cost}}</text>
                    </view>
                    <view class="text-item row verCenter">
                        <text class="label">期限：</text>
                        <text class="t1">{{item.loan_cycle}}</text>
                    </view>
                    <view class="text-item row verCenter">
                        <text class="label">平台成本：</text>
                        <text class="t2">{{item.platform_cost}}</text>
                    </view>
                    <view class="text-item row verCenter">
                        <text class="label">年利率：</text>
                        <text class="t1">{{item.annual_profit_rate}}</text>
                    </view>
                    <view class="text-item row verCenter" v-if="item.ration == 0">
                        <text class="label">产品佣金比例：</text>
                        <text class="t1">{{item.product_commission_ration}}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="no-data column rowCenter verCenter" v-else>
            <image src="@/static/card.dd09cd89.png" class="pic" mode="aspectFill"></image>
            <text class="tt">暂无产品信息哦～</text>
        </view>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';

    export default {
        data() {
            return {
                hasMoreData: true, //是否分页加载
                list: [],
                searchParams: {
                    channel_user_id: '',
                    page: 1,
                    limit: 20
                }
            };
        },
        onLoad(options) {
            this.searchParams.channel_user_id = options.channel_user_id;
            this.getData();
        },
        onReachBottom() {
            if (!this.hasMoreData) {
                return;
            }
            this.searchParams.page++;
            this.getData();
        },
        methods: {
            getData() {
                this.request(API.myProductList, 'GET', this.searchParams, true).then(res => {
                    if (res.code === 0) {
                        if (res.data.list.length > 0) {
                            this.hasMoreData = true;
                            this.list = this.list.concat(res.data.list);
                        } else {
                            this.hasMoreData = false;
                        }
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '@/assets/css/mine/myCommission.scss';
</style>